<template>
  <div>
    <NavBar :title="title" />
    <div class="content-top">
      <div class="">
        <van-field required v-model="postData.Company_Na" size="large" label="公司名称" maxlength="100" placeholder="请填写" style="font-size: 16px" />

        <van-field required readonly clickable size="large" :value="xzVal" label="公司性质" placeholder="请选择" style="font-size: 16px" @click="showPicker_xz = true" />
        <van-popup v-model="showPicker_xz" round position="bottom">
          <van-picker title="公司性质" show-toolbar :columns="picker_xz_data" :default-index="picker_xz_defaultIndex" value-key="codeValue" @confirm="onPickerXZSubmit" @cancel="showPicker_xz = false" />
        </van-popup>

        <van-field required readonly clickable size="large" :value="hyVal" label="所属行业" placeholder="请选择" style="font-size: 16px" @click="showPicker_hy = true" />
        <van-popup v-model="showPicker_hy" round position="bottom">
          <van-picker title="所属行业" show-toolbar :columns="picker_hy_data" :default-index="picker_hy_defaultIndex" value-key="codeValue" @confirm="onPickerHYSubmit" @cancel="showPicker_hy = false" />
        </van-popup>

        <van-field required readonly clickable size="large" :value="startDate" label="入职时间" placeholder="请选择" style="font-size: 16px" @click="showPicker_startDate = true" />
        <van-popup v-model="showPicker_startDate" round position="bottom">
          <van-datetime-picker v-model="picker_startDate_current" :min-date="picker_startDate_minDate" :max-date="picker_startDate_maxDate" type="year-month" title="入职时间" @confirm="onPickerStartDateSubmit" @cancel="showPicker_startDate = false" />
        </van-popup>

        <van-field required readonly clickable size="large" :value="endDate" label="离职时间" placeholder="请选择" style="font-size: 16px" @click="showPicker_endDate = true" />
        <van-popup v-model="showPicker_endDate" round position="bottom">
          <van-datetime-picker v-model="picker_endDate_current" :min-date="picker_endDate_minDate" :max-date="picker_endDate_maxDate" type="year-month" title="离职时间" @confirm="onPickerEndDateSubmit" @cancel="showPicker_endDate = false" />
        </van-popup>

        <van-field required readonly clickable size="large" :value="zwVal" label="担任职位" placeholder="请选择" style="font-size: 16px" @click="showPicker_zw = true" />
        <van-popup v-model="showPicker_zw" round position="bottom">
          <van-cascader title="担任职位" :options="select_zw_data" active-color="#05A6F0" :value="picker_zw_defaultIndex" @finish="onPickerZWSubmit" @close="showPicker_zw = false" />
        </van-popup>

        <div class="resume-content-tip">
          <span>简短描述</span>
          <van-field v-model="postData.Content" show-word-limit maxlength="800" rows="10" autosize type="textarea" placeholder="简短描述" style="font-size: 16px; color: #333; line-height: 22px" />
        </div>

        <div style=" margin: 16px;display: flex;justify-content: center;flex-direction: column;">
          <van-button type="primary" block color="#05A6F0" round style="font-size: 18px" text="提交" :loading="loading_submit" :disabled="disabled_submit" @click="onSubmit">
          </van-button>
          <span style="display: flex;justify-content: center;margin-top: 16px;color: #ccc;font-size: 15px;" @click="onNext">跳过</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import { Field, Picker, Popup, Button, Toast, DatetimePicker, Cascader,} from "vant";
import {getDoubleArrayMix} from "@/util/selectData";
export default {
  name: "ResumeQuick3",
  components: {
    NavBar,
    [Field.name]: Field,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [DatetimePicker.name]: DatetimePicker,
    [Cascader.name]: Cascader,
  },
  props: ["title"],
  mounted() {
    // this.picker_hy_data.splice(0, 1);
		this.getWork();
  },
  // 定义属性
  data() {
    return {
      postData: {
				ID:0,
				Date_Time:'',
				Company_Na:'',
				Trade_ID:'',
				Company_Type:'',
				DepartMent:'',
				Position_ID:'',
				Content:'',
      },
			startDate:'',
			endDate:'',
      showPicker_xz: false,
      picker_xz_data: this.$bd.companyType,
      picker_xz_defaultIndex: 0,

      showPicker_hy: false,
      picker_hy_data: this.$bd.trade,
      picker_hy_defaultIndex: 0,

      showPicker_startDate: false,
      picker_startDate_current: new Date(2000, 0, 1),
      picker_startDate_minDate: new Date(new Date().getFullYear() - 50, 0, 1),
      picker_startDate_maxDate: new Date(new Date().getFullYear() + 1, 0, 1),

      showPicker_endDate: false,
      picker_endDate_current: new Date(2000, 0, 1),
      picker_endDate_minDate: new Date(new Date().getFullYear() - 50, 0, 1),
      picker_endDate_maxDate: new Date(new Date().getFullYear() + 1, 0, 1),

      showPicker_zw: false,
      picker_zw_defaultIndex: "",

      loading_submit: false,
			xzVal:'',
			hyVal:'',
			zwVal:''
    };
  },
  computed: {
		datetime(){return `${this.startDate}/${this.endDate}`;},
    select_zw_data() {
      return getDoubleArrayMix(this.$bd.positionGrade1, this.$bd.positionGrade2);
    },
    disabled_submit() {
      if (
        this.postData.Company_Na != "" &&
        this.postData.CompanyType != "" &&
        this.postData.Trade_ID != "" &&
        this.postData.startDate != "" &&
        this.postData.endDate != "" &&
        this.postData.Position_ID != ""
      )
        return false;
      return true;
    },
  },
  // 方法集合
  methods: {
		//获取
		getWork(){
			this.$api.get('/Resume/GetWork').then(res=>{
				if(res.success){
					let data =res.response;
					this.postData.ID = data.id;
					this.postData.Company_Na = data.company_Na;
					this.postData.Company_Type = data.company_Type;
					this.xzVal = data.company_TypeValue
					this.postData.Trade_ID = data.trade_ID;
					this.hyVal = data.trade_Value;
					this.startDate = data.fmWorkStartDate;
					this.endDate = data.fmWorkEndDate;
					this.postData.Position_ID = data.position_ID;
					this.zwVal = data.position_Value;
					this.postData.Content = data.content;
				}
			})
		},
    //公司性质
    onPickerXZSubmit(item) {
      this.showPicker_xz = false;
      this.postData.Company_Type = item.code;
			this.xzVal = item.codeValue;
    },
    //所属行业
    onPickerHYSubmit(item) {
      this.showPicker_hy = false;
      this.postData.Trade_ID = item.code;
			this.hyVal = item.codeValue
    },
    //入职时间
    onPickerStartDateSubmit(value) {
      this.showPicker_startDate = false;
      this.startDate = this.$dayjs(value).format("YYYY-MM");
    },
    //离职时间
    onPickerEndDateSubmit(value) {
      this.showPicker_endDate = false;
      this.endDate = this.$dayjs(value).format("YYYY-MM");
    },
    //担任职位
    onPickerZWSubmit({ value ,selectedOptions}) {
      this.showPicker_zw = false;
      this.postData.Position_ID = value;
			this.zwVal = selectedOptions[1].text;
    },
    //提交
    onSubmit() {
      this.loading_submit = true;
			this.postData.Date_Time = this.datetime;
			this.$api.post('/Resume/SaveWork',this.postData).then(res=>{
				this.loading_submit = false;
				if(res.success){
					Toast.success('保存成功');
					this.onNext();
				}
				else{Toast.fail(res.msg)}
			})
    },
    onNext() {
      this.$router.push({ name: "person-resume-resumequick4" });
    },
  },
};
</script>

<style scoped>
.resume-content-tip {
  display: flex;
  flex-direction: column;
  background-color: #fff;
}

.resume-content-tip span {
  padding: 16px 16px 8px;
  font-size: 16px;
  color: #646566;
  line-height: 16px;
}
</style>
